<template>
	<view>
		<!-- 导航 -->
		<uni-nav-bar fixed statusBar :border="false">
			<view class="flex align-center justify-center w-100 font-weight-bold ">
				<view class="mx-1" @click="changeTab(index)" v-for="(item,index) in tabBars" :key="index"
					:class="tabIndex===index?'font-lg text-main':'font-md text-light-muted'">{{item.name}}</view>
			</view>
			<text slot="right" class="iconfont icon-fatie_icon"></text>
		</uni-nav-bar>
		<!-- 帖子模块 -->
		<swiper :duration="150" :style="'height:'+ scrollH +'px'" @change="onChangeTab" :current="tabIndex">
			<!-- 关注 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+ scrollH +'px'" @scrolltolower="loadMoreEvent">
					<block v-for="(item,index) in list" :key="index">
						<common-list :item="item" :index="index" @doSupport(doSupport)>
						</common-list>
						<divider></divider>
					</block>
					<load-more :loadmore="loadmore"></load-more>
				</scroll-view>
			</swiper-item>
			<!--话题-->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+ scrollH +'px'" >
				
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 模拟数据  
	const demo = [{
			username: '张三',
			userpic: '/static/demo/userpic/1.jpg', //头像
			newstime: '2024.4.28 9:07',
			isFollow: true, //当前是否被关注
			title: '哈哈哈',
			titlepic: '/static/demo/datapic/11.jpg', //帖子主图
			support: {
				type: 'support',
				support_count: 30, //赞
				unsupport_count: 1, //踩
			},
			comment_count: 3, //评论
			share_num: 15 //转发
		},
		{
			username: '李四',
			userpic: '/static/demo/userpic/2.jpg',
			newstime: '2024.4.24 9:01',
			isFollow: true,
			title: '鞠婧祎',
			titlepic: '/static/demo/datapic/12.jpg',
			support: {
				type: 'support',
				support_count: 844,
				unsupport_count: 11,
			},
			comment_count: 551,
			share_num: 732
		},
		{
			username: 'TNB_k.鞠婧祎',
			userpic: '/static/demo/userpic/3.jpg',
			newstime: '2024.4.23 3:24',
			isFollow: true,
			title: '鞠婧祎',
			titlepic: '/static/demo/datapic/113.jpg',
			support: {
				type: 'support',
				support_count: 1115,
				unsupport_count: 15,
			},
			comment_count: 831,
			share_num: 999
		}
	]
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import commonList from "@/components/common/common-list.vue"
	import loadMore from '@/components/common/load-more.vue';
	import hotCate from '@/components/news/hot-cate.vue';
	export default {
		components: {
			uniNavBar,
			commonList,
			loadMore,
			hotCate
		},
		data() {
			return {
				hotCate:[{
					name:""
				}]
				scrollH: 500,
				//标签选项
				tabBars: [{
						name: "关注"
					},
					{
						name: "话题"
					}
				],
				//选中项
				tabIndex: 0,
				//关注列表
				list: [],
				//上拉加载状态 三种 参照 index.vue
				loadmore :"上拉加载更多"
			};
		},
		//页面加载时
		onLoad() {
			//页面加载时获取手机系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - res.statusBarHeight - 44
				}
			})
			//加载测试数据
			this.list = demo
		},
		methods: {
			//上拉加载事件
			loadMoreEvent(){
				//验证当前是否处于可加载状态
				if(this.loadmore !== '上拉加载更多')
				return
				//设置加载状态
				this.loadmore ='加载中...'
				//模拟请求数据
				setTimeout(()=>{
					//加载数据
					this.list = [...this.list,...this.list]
					//设置加载状态
					this.loadmore ='上拉加载更多'
				},2000)
			},
			//切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			//滑动
			onChangeTab(e) {
				this.tabIndex = e.detail.current
			},
			doSupport(e) {
				console.log('测试');
				// console.log(e);
				// 得到当前点击的对象
				let item = this.list[e.index]
				// 判断当前对象顶或踩
				let msg = e.type === 'support' ? '顶' : '踩'
				// 到底是顶还是踩？还未明确

				//判断之前是否顶或踩过？
				if (item.support.type === '') {
					item.support[e.type + '_count']++
				}
				// 之前顶过
				else if (item.support.type === 'support' && e.type === 'unsupport') {
					// 顶-1 踩+1
					item.support.support_count--
					item.support.unsupport_count++
					console.log('测试');
					// 之前踩过
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					// 顶+1 踩-1 
					console.log('测试1');
					item.support.support_count++
					item.support.unsupport_count--

				}
				//统一点击顶踩之后状态
				item.support.type = e.type
				// 可以使用定时器 模拟网络延迟效果
				//模拟0.5秒之后显示弹窗
				uni.showToast({
					title: msg + "成功"
				})
			}
		}
	}
</script>

<style lang="scss">

</style>